<template>
	<div class="live-speaker-box">
		<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<li v-for='(v,index)  of  arrayData' :key="index">
				<div class="speaker-top-box">
					<img class="tx-pic" :src="v.headurl + '?x-oss-process=image/resize,m_fixed,h_60,w_60' || sysInfo.icon + '?x-oss-process=image/resize,m_fixed,h_60,w_60'" />
					<div class="top-info">
						<p class="nick-name">{{v.nick}}</p>
						<p class="top-time">{{v.t}}</p>
					</div>
				</div>
				<div class="connect-box">
					<!--文本-->
					<template v-if="v.elems[0].MsgType == 'TIMTextElem'">
						<p>{{v.elems[0].MsgContent.Text}}</p>
					</template>
					<template v-else-if="v.elems[0].MsgType == 'TIMImageElem'">
						<img :src="v.elems[0].MsgContent.Url" />
					</template>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			speakerData: {
				type: Array,
			}
		},
		data() {
			return {
				arrayData: [],
				page: 0, //页码
				busy: false, //打开滚动
			}
		},
		created: function() {
			//console.log(this.$route.params.roomid)
			this.getSpeakerData()
		},
		computed: {
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			},
		},
		watch: {
			speakerData(cur, old) {
				this.arrayData = [...cur,...this.arrayData]
			}
		},
		activated: function() {},
		mounted: function() {},
		methods: {
			loadMore: function() {
				this.busy = true;
				// 多次加载数据				
				setTimeout(() => {
					this.page++;
					this.getSpeakerData();
				}, 160);

			},
			getSpeakerData() {
				let _this = this
				//console.log(this.ownerdata)
				_this.$http.get("/msg/getMsgList?roomId=" + _this.$route.params.roomid + "&page=" + this.page + "&pageSize=" + 10).then(
					res => {
						//console.log(res.data.data);
						if(res.data.code = "000000") {
							if(res.data.data.content.length){
								_this.busy = false;
								_this.arrayData =[..._this.arrayData,...res.data.data.content] ;
								if(res.data.data.content.length<10){
									_this.busy = true;
								}
							}
							
						}
					},
					err => {
						console.log(err);
					}
				);
			},
		},
		filters: {
			filterTime(v){
				return v.substr(5,11)
			}
		}
	}
</script>

<style scoped="scoped">
	.live-speaker-box {
		width: 100vw;
		height: calc(100vh - 495px);
		background: #F3F3F3;
	}
	
	.live-speaker-box ul {
		width: 100vw;
		height: calc(100vh - 510px);
		/*background: pink;*/
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 20px;
		/*padding-top: 48px;*/
	}
	
	.live-speaker-box ul li {
		margin-top: 48px;
		padding-left: 30px;
		/*padding-top: 48px;*/
	}
	
	.speaker-top-box {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: c;
	}
	
	.speaker-top-box .tx-pic {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	
	.top-info {
		height: 60px;
		display: flex;
		/*	align-items: center;*/
		justify-content: center;
		flex-direction: column;
		margin-left: 33px;
	}
	
	.nick-name {
		font-size: 26px;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 10px;
	}
	
	.top-time {
		font-size: 22px;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}
	
	.connect-box {
		margin: 20px 30px 0 84px;
		text-align: justify;
	}
	
	.connect-box p {
		font-size: 30px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 36px;
	}
	
	.connect-box img {
		max-width: 606px;
	}
</style>